<template>
	<view class='popShopTel popShop'>
		<view class="top flex_row_btw_top">
			<view class="left flex_row_start_center">
				<text>绑定手机号</text>
			</view>
			<view class="close">
				<up-icon name="close" color="#000" size="16" @tap="closes"></up-icon>
			</view>
		</view>
		<view class="main">
			<view class="tip">
				为保障交易正常进行，需要对您的手机号进行验证并绑定！
			</view>
			<view class="form">
				<up-form labelPosition="left" :model="userInfo" :rules="rules" ref="uForm" class="forms"
					:label-width="60">
					<up-form-item label="手机号: " v-if="!showInput" prop="phone" ref="item1" border="none">
						{{userInfo.phone}}
					</up-form-item>
					<up-form-item label="手机号: " v-else prop="phone" ref="item1" border="none">
						<up-input v-model="userInfo.phone"  maxlength="11">
						</up-input>
					</up-form-item>
					<up-form-item label="验证码: " prop="code" ref="item1">
						<view class="flex_row_start_center">
							<up-input v-model="userInfo.code"  maxlength="6"
								style="width: 160rpx;">
							</up-input>
							<view class="getPhoneCode" v-if="!getCodeShow" @click="getCode(userInfo.phone)">
								获取验证码
							</view>
							<view class="getPhoneCode" v-if="getCodeShow">{{ timer }}秒重新获取</view>
						</view>

					</up-form-item>
				</up-form>
				<view class="btn1" @click="saveInfo">
					确定
				</view>
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		getCodeRequst,
		bindTongLian
	} from '@/api/login.js'
	import {
		ref,
		onMounted,
		defineExpose,
		watch,
		reactive,
		defineEmits
	} from 'vue';
	import {
		onLoad,
		onReady,
		onShow,
		onHide,
	} from '@dcloudio/uni-app'
	const userInfo = ref({
		phone: '',
		code: '',
		user_id: ''
	})

	const rules = {
		'phone': [{
			type: 'string',
			required: true,
			max: 11,
			message: '请输入正确手机号',
			trigger: ['blur', 'change'],
		}, {
			pattern: /^1[3-9]\d{9}$/,
			message: '手机号格式不正确',
			trigger: 'blur'
		}],
		'code': {
			type: 'string',
			max: 6,
			required: true,
			message: '请输入验证码',
			trigger: ['blur', 'change'],
		},
	}
	let timer = ref(60);
	let t = null;
	let getCodeShow = ref(false);
	//获取验证码
	const getCode = async (phone) => {
		let res = await getCodeRequst({
			phone: phone,
			scene: '3',
			extend: userInfo.value.user_id
		})
		uni.showToast({
			icon: 'none',
			title: res.msg
		})
		if (res.code == 1) {
			getCodeShow.value = true
			if (t) clear();
			t = setInterval(() => {
				timer.value--;
				if (timer.value === 0) clear();
			}, 1000);
		} else {
			getCodeShow.value = false
		}
		console.log(res.data)
	}

	const clear = () => {
		clearInterval(t);
		timer.value = 60;
		getCodeShow.value = false;
		t = null;
	};
	
	
	const uForm = ref()
	
	const emit = defineEmits(['closeModel','saveModel'])
	//通过微信code 获取信息
	const saveInfo = async () => {
		console.log('baocun')
		if (userInfo.value.code == '') {
			uni.showToast({
				icon: 'none',
				title: '请输入验证码'
			})
			return
		}
		let obj = {
			code: userInfo.value.code,
			phone: userInfo.value.phone
		}
		const res = await bindTongLian(obj)
		if (res.code == 0) {
			uni.showToast({
				icon: 'none',
				title: res.msg
			})
		} else {
			uni.setStorageSync('token', res.data.userinfo.token)
			uni.setStorageSync('useInfo', res.data.userinfo)
			// emit('saveModel')
			emit('closeModel')
		}
	}
	
	
	const closes = ()=>{
		clear()
		emit('closeModel')
	}
	const showInput = ref(false)
	onMounted(() => {
        userInfo.value.phone = uni.getStorageSync('useInfo').phone
		showInput.value = userInfo.value.phone==''?true:false
		userInfo.value.user_id = uni.getStorageSync('useInfo').id
	})
</script>

<style scoped lang="less">
	.form {
		display: flex;
		flex-wrap: wrap;
		align-content: center;

		.forms {
			display: flex;
			flex: 1;
			flex-direction: column;
			width: calc(100vw - 30px);
		}

		.getPhoneCode {
			display: inline-block;
			font-weight: 400;
			font-size: 30rpx;
			margin-left: 20rpx;
			color: #D0A564;
			cursor: pointer;
			background: #FFFFFF;
			padding-right: 20rpx;
		}
	}


	.popShopTel {
		padding: 30rpx 30rpx 45rpx;
		background-image: url(https://zzt-pub.oss-cn-wuhan-lr.aliyuncs.com/clientImg/telBj%402x.png);
		background-repeat: no-repeat;
		background-size: 100%;
		height: auto;
		.left {
			text {
				font-weight: 500;
				font-size: 34rpx;
				color: #333333;
			}
		}

		.main {
			margin-top: 20rpx;

			.tip {
				font-weight: 500;
				font-size: 30rpx;
				color: #333333;
				margin-bottom: 44rpx;
			}
		}

		.btn1 {
			width: 100%;
			height: 80rpx;
			background: linear-gradient(113deg, #F2BD6F 0%, #CCA05F 100%);
			border-radius: 20rpx;
            margin-top: 92rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
	}
</style>